$(function () {
  // 图表1 初始化

  // 1-初始化echarts实例-指定图表父容器 
  var myChart1 = echarts.init(document.getElementById('c1'));

  // 2-指定图表的数据 和 设置 
  var option1 = {
    // 标题
    title: {
      text: '2020年注册人数'
    },
    // 提示工具 
    tooltip: {},
    // 图例
    legend: {
      data: ['销量', '注册人数']
    },
    // x轴
    xAxis: {
      data: ["一月", "二月", "三月", "四月", "五月", "六月"]
    },
    // y轴：一般不用设置，会根据数据智能的生成
    yAxis: {},
    // 系列
    series: [
      {
        name: '销量',
        type: 'bar',  //bar 柱图  line 线图 pie 饼图 
        data: [5, 20, 36, 15, 10, 20]
      },
      {
        name: '注册人数',
        type: 'line',  //bar 柱图  line 线图 pie 饼图 
        data: [15, 30, 6, 12, 15, 22]
      }
    ]
  };

  // 3- 把数据交给eaharts实例进行绘制  
  myChart1.setOption(option1);


  // 图表1 初始化

  // 1-初始化echarts实例-指定图表父容器 
  var myChart2 = echarts.init(document.getElementById('c2'));

  // 2-指定图表的数据 和 设置 
  var option2 = {
    title: {
      text: '热门品牌销售',
      subtext: '权威数据',
      x: 'right'
    },
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['耐克', '阿迪', '老北京布鞋', '人字拖', '李宁']
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '60%',
        center: ['50%', '50%'],
        data: [
          { value: 335, name: '耐克' },
          { value: 310, name: '阿迪' },
          { value: 234, name: '老北京布鞋' },
          { value: 135, name: '人字拖' },
          { value: 1548, name: '李宁' }
        ],
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  // 3- 把数据交给eaharts实例进行绘制  
  myChart2.setOption(option2);
});


